import { i18n } from "discourse-i18n";
import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
import StyleguideIcons from "discourse/plugins/styleguide/discourse/components/styleguide-icons";

const Icons = <template>
  <div class="section-description">
    <p>Discourse uses a free set of SVG icons from Font Awesome (<a
        href="https://fontawesome.com/icons?d=gallery&m=free"
      >{{i18n "styleguide.sections.icons.full_list"}}</a>).</p>
    <p>Plugins and themes can add SVG icons to the SVG spritesheet, or replace
      existing icons entirely.</p>
    <p>
      <ul>
        <li><a
            href="https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643"
          >How to use SVG icons in your plugin or theme</a></li>
        <li><a
            href="https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736/1"
          >How to replace Discourse's default icons in a theme</a></li>
      </ul>
    </p>
    <p>By default, all icons have the
      <pre class="pre-inline">.d-icon</pre>
      class applied along with a class containing the name of the icon (e.g.,
      <pre class="pre-inline">.d-icon-link</pre>)</p>
  </div>

  <StyleguideExample @title="d-icon - all available icons">
    <StyleguideIcons />
  </StyleguideExample>
</template>;

export default Icons;
